<template>
  <el-container>
    <el-header>
      <el-menu
          style="padding:5mm"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-row>
          <el-col :span="4"><h1 align="center">影院订票系统</h1></el-col>
          <el-col :span="2"><el-menu-item index="1" @click="$router.push('/')"  align="center">首页</el-menu-item></el-col>
          <el-col :span="2"><el-menu-item index="2" @click="$router.push('/center')" align="center">个人中心</el-menu-item></el-col>
          <el-col :span="12"><b>&nbsp</b></el-col>
          <el-col :span="2"><el-menu-item index="3"  align="center">kooriookami</el-menu-item></el-col>
          <el-col :span="2"><el-menu-item index="4" @click="$router.push('/login')"  align="center">登出</el-menu-item></el-col>
        </el-row>
      </el-menu>
    </el-header>
    <el-divider></el-divider>
  <el-main>
    <el-form label-width="120px" size="small" :model="form" :rules="rules" ref="pass">

      <el-form-item label="原密码" prop="password">
        <el-input v-model="form.password" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="form.newPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认新密码" prop="confirmPassword">
        <el-input v-model="form.confirmPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button type="primary" @click="$router.push('/center')">返回</el-button>
      </el-form-item>
    </el-form>
  </el-main>
  </el-container>
</template>
<script>
export default {
  name: "Password",
  data() {
    return {
      form: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      rules: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, message: '长度不少于3位', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    this.form.username = this.user.username
  },
  methods: {
    save() {
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>